<template>
  <!--申请理赔页面-->
  <div>
    <p class="des">若此订单有多个被保险人，请提交发生延误的用户信息</p>
    <ul>
      <li class="list" v-for="(insurant,index) in insurantList">
        <div class="msg">
          <p class="checkbox-custom " @click="goCheck(index)">
            <input type="checkbox" :value="1" name="rentType" v-model="insurant.isCheck"> <label></label>
          </p>
          <ul class="card">
            <li>{{insurant.userName}}</li>
            <li v-if="insurant.identityType==1">身份证号：{{insurant.identityNo}}</li>
            <li v-if="insurant.identityType==2">护照号：{{insurant.identityNo}}</li>
            <li v-if="insurant.identityType==3">港澳台证件号：{{insurant.identityNo}}</li>
            <li v-if="insurant.identityType==4">军官证：{{insurant.identityNo}}</li>
            <li v-if="insurant.identityType==5">其他：{{insurant.identityNo}}</li>
          </ul>
        </div>
        <div class="detail" v-show="insurant.isCheck">
          <p>银行卡号</p>
          <div class="inputcontent">
            <input placeholder="该银行卡号必须为对应被保险人员本人卡号" type="number" v-model="insurant.bankNo">
          </div>
          <p>开卡银行</p>
          <div class="inputcontent">
            <input placeholder="请填写开户银行" type="text" v-model="insurant.depositBank">
          </div>
        <!--  <wv-group class="yinhang" v-model="insurant.depositBank=bank[0]">
            <wv-cell
              title="开卡银行"
              is-link
              :value="bank | bankFilter"
              @click.native="bankPickerShow = true"
            />
            <wv-picker
              :visible.sync="bankPickerShow"
              v-model="bank"
              :columns="bankColumns"
              @confirm="confirmBank"
            />
          </wv-group>-->
          <div class="upload" @click="initChooseImageWxapi(index,'boardingPassImg')">
            <p v-if="insurant.boardingPassImg==''"><img src="../../../assets/upload.png" alt="" width="36"></p>
            <p v-else><img :src="insurant.boardingPassImg | imgPathFilter"  width="100%"></p>
            上传登机牌
          </div>
          <div class="upload" @click="initChooseImageWxapi(index,'proveImg')">
            <p v-if="insurant.proveImg==''"><img src="../../../assets/upload.png" alt="" width="36"></p>
            <p v-else><img :src="insurant.proveImg | imgPathFilter"  width="100%"></p>
            上传延误证明
          </div>
        </div>
      </li>
    </ul>
    <p class="offer" @click="goSubmit()">提交</p>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getDelayriskDetail,imgUpload} from '../../../../test/unit/http'
  import {wxApi} from '../../../../test/unit/flyme_weixin'
  import {Toast} from 'we-vue'

  export default {
    name: 'shenqinglipei',
    props: {},
    data() {
      return {
        isCheck: false,
        bankPickerShow: false,
      /*  bank: ['农业银行'],
        bankColumns: [
          {
            values: [
              '农业银行',
              '建设银行',
              '中国银行',
              '招商银行',
            ],
            defaultIndex: 0
          }
        ],*/
        delayrisk: {},
        insurantList: []
      };
    },
    methods: {
      confirmBank(picker) {
        this.bank = picker.getValues()
      },
      openPicker(ref) {
        this.$refs[ref].open()
      },
      getDelayriskDetailData(params) {
        getDelayriskDetail(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.delayrisk = res.object.delayrisk;
            let insurantList = res.object.insurantList;
            for (let key in insurantList) {
              insurantList[key]['isCheck'] = false;
            }
            this.insurantList = insurantList;
          }
        })
      },
      initChooseImageWxapi(index,key) {
        let that = this;
        wxApi.chooseImage({
          count: 1,
          callback: function (res, localIds) {
            let imgId = res.serverId;
            let params = {
              'pojoName': 'insurant',
              'businessKey': key,
              'imgId': imgId
            };
            imgUpload(params).then(res => {
              if (res.code == 100) {
                if(key=='proveImg'){
                  that.insurantList[index].proveImg = res.object.filePath;
                }
                if(key=='boardingPassImg'){
                  that.insurantList[index].boardingPassImg = res.object.filePath;
                }
              } else {
                Toast.fail('上传失败');
              }
            })
          }
        });
      },
      goCheck(index) {
        this.insurantList[index]['isCheck'] = true;
      },
      checkForm(insurantList) {
        let msg = {};
        let length = insurantList.length;
        let myUtils = this.$myUtils;
        if (length > 0) {
          for (let key in insurantList) {
            let insurant = insurantList[key];
            if (myUtils.isNull(insurant.bankNo)) {
              msg['result'] = false;
              msg['info'] = '请填写银行卡号';
              return msg;
            }
            if (myUtils.isNull(insurant.depositBank)) {
              msg['result'] = false;
              msg['info'] = '请选择开户行';
              return msg;
            }
          }
        }
        msg['result'] = true;
        msg['info'] = '校验成功';
        return msg;
      },
      goSubmit() {
        let insurantList = this.insurantList;
        let newInsurantList = [];
        for (let key in insurantList) {
          let insurant = insurantList[key];
          if (insurantList[key].isCheck) {
            insurant['isApply'] = 2;
            insurant['isCheck'] = 2;
            newInsurantList.push(insurant)
          }
        }
        let msg = this.checkForm(newInsurantList);
        if (!msg.result) {
          Toast.text(msg.info);
          return;
        }
        let insurantListInfo = JSON.stringify(newInsurantList);
        let delayriskId = this.$route.query.delayriskId;
        this.$router.push({path: 'lipeiconfirm', query: {delayriskId: delayriskId, insurantListInfo: insurantListInfo}})
      }
    },
    mounted() {

    },
    created() {
      wxApi.init();
      let delayriskId = this.$route.query.delayriskId;
      this.getDelayriskDetailData({delayriskId: delayriskId});
    },
    filters: {
      bankFilter(val) {
        if (Array.isArray(val)) {
          return val.toString()
        } else {
          return '请选择'
        }
      },
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .checkbox-custom {
    position: relative;
    display: inline-block;
  }

  .checkbox-custom input[type=checkbox] {
    z-index: 1;
    width: 25px;
    height: 25px;
    opacity: 0;
    cursor: pointer;
  }

  .checkbox-custom input[type=checkbox] {
    position: absolute;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    cursor: pointer;
    box-sizing: border-box;
  }

  .checkbox-custom label::before {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-left: -20px;
    content: "";
    background: url("../../../assets/radio.png") no-repeat;
    background-size: 100% 100%;
    -webkit-transition: all .3s ease-in-out 0s;
    -o-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
  }

  .checkbox-custom input[type=checkbox]:checked + label::after {
    content: "";
    background: url("../../../assets/radiocheaked.png") no-repeat;
    background-size: 100% 100%;
  }

  .checkbox-custom label::after {
    cursor: pointer;
    display: inline-block;
    width: 25px;
    height: 25px;
    padding-top: 1px;
    margin-left: -25px;
    font-size: 12px;
    line-height: 20px;
    color: #76838f;
    text-align: center;
  }

  .checkbox-custom input[type=checkbox] {
    margin-left: -20px;
  }

  .yinhang {
    border-bottom: 1px solid #dedede;
  }

  .upload {
    border: 2px dashed #2f95f0;
    text-align: center;
    color: #2f95f0;
    font-size: 13px;
    padding: 30px 10px;
    margin-top: 20px;

    p {
      margin-bottom: 10px;
    }
  }

  .des {
    font-size: 13px;
    color: #999;
    padding: 10px;
    text-align: left;
  }

  .msg {
    margin: 0 10px 10px;
    padding-bottom: 10px;
    display: flex;
    text-align: left;
    border-bottom: 1px solid #ddd;

    > p {
      flex: 0 60px;
      text-align: center;
      padding-top: 13px;
    }

    .card {
      li:first-child {
        font-size: 16px;
        color: #111;
      }

      li:last-child {
        color: #999;
      }
    }
  }

  .detail {
    text-align: left;
    padding: 10px;

    p {
      color: #2d93f0;
      font-size: 13px;
    }

    .inputcontent {
      display: flex;

      input {
        flex: 1;
        border: none;
        padding: 10px;
        border-bottom: 1px solid #dedede;
        outline: none;
        width: calc(20% - 20px);
        margin-right: 5px;
      }

      input:last-child {
        margin-right: 0;
      }
    }

  }

  .offer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-image: linear-gradient(to left, #4c92ed, #61beec);
    height: 50px;
    line-height: 50px;
    color: #fff;
    z-index: 2;
  }
</style>
